<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 仪表盘4
 * @LastEditTime: 2021-11-11 17:12:46
 * @FilePath: \tianjushi-kanban\src\components\charts\Gauge4.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading,hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    total: {
      type: Number,
      default: 100,
    },
    value: {
      type: Number,
      default: 50,
    },
    unit: {
      type: String,
      default: "",
    },
	 fontSize: {
      type: Number,
      default:18,
    }, 
    chartdata:{
      type: Array,
      default: [
        { value: 1.5, name: '风险点数 ' ,max:9,unit:'un'},
        { value: 1.5, name: '风险点数 ',max:10 ,unit:'un'},
        { value: 1.5, name: '风险点数 ',max:9,unit:'un' },
        ],
    },
    color: {
      type: Array,
      default: ["#0ba360", "#0ba360"],
    },
	pointercolor:{
		type: Array,
      default: ["#00c6fb", "#005bea"],	
	}
  },
  setup: function (props, context) {
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(state.chartInit);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => { 
 
      const option = {
       
        series: [
          { 
            type: 'gauge',
            center: ['22%', '55%'], // 默认全局居中
            radius: '80%',
            min: 0,
            max: props.chartdata[0].max,
            endAngle: 45,
            splitNumber: 7,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
                width: 8,
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            axisLabel: { // 坐标轴小标记
              fontWeight: 'bolder',
              color: '#c2d4ff',
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 10,
              show: false

            },
            axisTick: { // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#c2d4ff',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            pointer: {
              width: 5,
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 5
            },
            title: {
              offsetCenter: [0, '90%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#c2d4ff',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10,
                fontSize: props.fontSize 
              }
            },
            detail: {
               formatter: function (value) {
                return value.toFixed(1) + props.chartdata[0].unit;
              },
              bordercolor: '#c2d4ff',
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 5,
              width: 80,
              height: 30,
              offsetCenter: [5, '60%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#c2d4ff',
                fontSize: props.fontSize+6
              }
            },
            data: [props.chartdata[0]]
          },
          { 
            type: 'gauge',
            min: 0,
            max: props.chartdata[1].max,
            splitNumber: 11,
            radius: '90%',
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                width: 10,
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            axisLabel: { // 坐标轴小标记
              fontWeight: 'bolder',
              color: '#c2d4ff',
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 10,
              show: false
            },
            axisTick: { // 坐标轴小标记
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 25, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#c2d4ff',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            pointer: { // 分隔线
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 5
            },
            title: {
              offsetCenter: [0, '90%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#c2d4ff',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10,
                fontSize: props.fontSize
              }
            },
            detail: {
               formatter: function (value) {
                return value.toFixed(1) + props.chartdata[1].unit;
              },
              offsetCenter: [0, '60%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#c2d4ff',
                fontSize: props.fontSize+6
              }
            },
            data: [props.chartdata[1]]
          },
          { 
            type: 'gauge',
            center: ['78%', '55%'],  
            radius: '80%',
            min: 0,
            max: props.chartdata[2].max,
            startAngle: 135,
            endAngle: -45,
            splitNumber: 7,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
                width: 8,
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            axisLabel: { // 坐标轴小标记
              fontWeight: 'bolder',
              color: '#c2d4ff',
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 10,
              show: false
            },
            axisTick: { // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#c2d4ff',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10
              }
            },
            pointer: {
              width: 5,
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 5
            },
            title: {
              offsetCenter: [0, '90%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#c2d4ff',
                shadowcolor: '#c2d4ff', // 默认透明
                shadowBlur: 10,
                fontSize: props.fontSize
              }
            },
            detail: {
              // backgroundColor: 'rgba(30,144,255,0.8)',
              // borderWidth: 1,
              bordercolor: '#c2d4ff',
              shadowcolor: '#c2d4ff', // 默认透明
              shadowBlur: 5,
              width: 80,
              height: 30,
               formatter: function (value) {
                return value.toFixed(1) + props.chartdata[2].unit;
              },
              offsetCenter: [-5, '60%'], // x, y，单位px
              textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#c2d4ff',
                fontSize: props.fontSize+6
              }
            },
            data: [props.chartdata[2]]
          }
        ]
      }
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      state.chartInit = echarts.init(state.echartref);
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style lang="css" scoped> 
 
</style>